<template>
    <div>
        <div @click="popup.openPopup" class="vue-flow-model">
            <n-icon size="30" color="#18A058">
                <Compare/>
            </n-icon>
            <Handle id="DataCombined-inlet" type="target" :position="Position.Left"
                    :is-valid-connection="props.isValidSourcePos"/>
            <Handle id="DataCombined-export" type="source" :position="Position.Right"
                    :is-valid-connection="props.isValidTargetPos"/>
        </div>
        <span>数据合并</span>
        <flow-popup-window
            :show="popup.show"
            :on-click-outside="popup.clickPopupOutside"
            :x="popup.x"
            :y="popup.y"
        >
            <n-card title="数据合并">
                <p>合并</p>
                <n-radio-group v-model:value="connected" name="radioGroup">
                    <n-space>
                        <n-radio v-for="song in connectedArray" :key="song.value" :value="song.value">
                            {{ song.label }}
                        </n-radio>
                    </n-space>
                </n-radio-group>
                <p>列索引</p>
<!--                <p>匹配</p>-->
                <n-select
                    v-model:value="keyA"
                    multiple
                    :options="props.data.data1.title"
                    @update:value="popup.reopen"
                    placeholder="选择列"
                    label-field="title"
                    value-field="title"
                />
                匹配
                <n-select
                    v-model:value="keyB"
                    multiple
                    :options="props.data.data2.title"
                    @update:value="popup.reopen"
                    placeholder="选择列"
                    label-field="title"
                    value-field="title"
                />
                <template #footer>
                    <n-space>
                        <n-button @click="getSuperiorData">获取上级节点数据</n-button>
                        <n-button @click="conversion">合并</n-button>
                    </n-space>
                </template>
            </n-card>
        </flow-popup-window>
    </div>
</template>

<script setup>

import {Handle, Position} from "@vue-flow/core";
import {Compare} from "@vicons/carbon";
import {useElementsStore} from "@/stores/elements";
import workApi from "@/http/workApi";
import FlowPopupWindow from "@/components/VueFlowModel/vueFlowPopupWindow/FlowPopupWindow.vue";

const props = defineProps(['isValidTargetPos', 'isValidSourcePos', 'id', 'data'])
const elements = useElementsStore()
// 点击弹窗
const popup = reactive({
    show: false,
    x: null,
    y: null,
    wait: false,
    clickPopupOutside: () => {
        popup.closedPopup()
    },
    openPopup: (e) => {
        popup.x = e.x
        popup.y = e.y
        popup.show = true
    },
    closedPopup: () => {
        if (!popup.wait) {
            console.log(22)
            popup.show = false;
        }
    },
    reopen: () => {
        popup.show = true
    }
})
const connectedArray = [
    {label:"从附加数据添加列（左连接）",value:"left"},
    {label:"寻找匹配行（内连接）",value:"inner"},
    {label:"连接表格（全外连接）",value:"outer"},
]
const connected = ref("left")
const keyA = ref([])
const keyB = ref([])


const getSuperiorData = () => {
    let a = 2
    // 获取上级节点数据
    for (let i of elements.elements) {
        if (i['target'] === props.id) {
            for (let j of elements.elements) {
                if (j.id === i['source']) {
                    console.log(j)
                    if (a === 2) {
                        props.data.data1 = {...j.data.data};
                        props.data.data1.title.map(s => {
                            // 移除可修改
                            delete s.render
                            return s
                        })
                        console.log(props.data)
                        a--
                        break
                    }else if (a === 1) {
                        props.data.data2 = {...j.data.data};
                        props.data.data2.title.map(s => {
                            // 移除可修改
                            delete s.render
                            return s
                        })
                        console.log(props.data)
                        return
                    }

                }
            }
        }
    }
}
const conversion = ()=>{
    workApi.post("perform_tasks/data_merge",{
        data1:props.data.data1,
        data2:props.data.data2,
        connected:connected.value,
        keyA:keyA.value,
        keyB:keyB.value
    }).then(r=>{
        props.data.data =r.data
    });
}
</script>

<style scoped lang="less">
.n-card {
    p{
        margin-top: 20px;
    }
}
</style>